<template>
    <div class="app-container">
        <el-breadcrumb separator="/" class="breadcrumb2">
            <el-breadcrumb-item :to="{ path: '/userrightlink1/userrightlink11' }">组织绑定</el-breadcrumb-item>
        </el-breadcrumb>
        <!--当前权限等级-->
        <el-card class="right">
            <div>
                <i class="el-icon-suitcase"></i>
                <span >当前权限等级：</span>
                <el-tag>{{nowRight}}</el-tag>
            </div>
        </el-card>
        <!--绑定的上级-->
        <el-card class="righttable">
            <i class="el-icon-star-off"></i>
            <span>绑定的上级</span>
            <el-button type="warning" style="float:right;margin-left:10px" size="small" @click="openbindHistory()">绑定历史</el-button>
            <el-button type="primary" style="float:right" size="small" @click="openbind()">去绑定</el-button>
            <el-table
                :data="bindUp"
                style="width: 100%; margin-top:20px;"
                fit 
                border
                stripe
            >     
                <el-table-column
                prop="t1"
                label="权限等级"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.fatherLevel==2">学院管理员</span>
                    <span v-else-if="scope.row.fatherLevel==1">学校管理员</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="fatherName"
                label="管理单位名称"
                min-width="100"
                align="center">
                </el-table-column>
                <el-table-column
                label="绑定状态"
                min-width="100"
                align="center">
                <el-tag type="success">已绑定</el-tag>
                </el-table-column>
                <el-table-column
                label="考勤开放情况"
                min-width="100"
                align="center">
                    <template slot-scope="scope">
                        <el-dropdown split-button type="primary" size="small" @click="handleClick" >
                        {{resultKaoq}}
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="openResult(scope.row)">开放考勤结果</el-dropdown-item>
                            <el-dropdown-item @click.native="closeResult(scope.row)">关闭考勤结果</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--绑定的下级-->
        <el-card class="righttable">
            <i class="el-icon-user"></i>
            <span>绑定的下级</span>
            <div style="width:300px;margin:0 auto;">
                <span style="color: gray;">专业管理员没有绑定的下级</span>
            </div>
        </el-card>
        <!--绑定历史对话框-->
        <el-dialog
        title="绑定历史"
        :visible.sync="bindHistorydialogVisible"
        width="50%">
            <el-table
                :data="bindHistoryList"
                style="width: 100%; margin-top:20px;"
                fit 
                border
                stripe
            >     
                <el-table-column
                prop="groupName"
                label="上级名称"
                min-width="120"
                align="center">
                </el-table-column>
                <el-table-column
                prop="status"
                label="绑定状态"
                min-width="80"
                align="center">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.status===0">待审核</el-tag>
                    <el-tag type="success" v-else-if="scope.row.status===1">绑定中</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.status===2">已驳回</el-tag>
                    <el-tag type="danger" v-else>已解除</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                prop="applyTime"
                label="申请时间"
                min-width="100"
                align="center">
                </el-table-column>
            </el-table>
            <div class="pagination-container2" >
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next,jumper"
                :current-page.sync="formInline.pageNum"
                :page-size="formInline.pageSize"
                :page-sizes="[5, 10, 15]"
                :total="total"
            ></el-pagination>
            </div>
            
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="bindHistorydialogVisible = false">关  闭</el-button>
        </span>
        </el-dialog>
        <!--去绑定对话框-->
        <el-dialog
        title="前往绑定"
        :visible.sync="gotobinddialogVisible"
        width="50%">
            <div style="margin-left:200px">
            <el-form :model="applyForm" :rules="rules" ref="applyForm">
                <el-form-item  label="上级单位：">
                    <el-cascader
                        v-model="applyForm.value"
                        :options="options"
                        :props="myprop"
                        @change="handleChange"></el-cascader>
                </el-form-item>                
            </el-form>
            </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="gotobind('applyForm')">确  定</el-button>
            <el-button @click="closegotobind('applyForm')">取  消</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data(){
        return{
            //去绑定对话框
            gotobinddialogVisible:false,

            //开放考勤结果情况
            resultKaoq:'开放考勤结果',
            nowRight:'',
            //上级单位
            bindUp:[],
            //绑定历史
            bindHistorydialogVisible:false,
            bindHistoryList:[],
            //绑定历史  //分页
            formInline: {
                university: '',
                academy: '',
                name: '',
                pageNum: 1,
                pageSize: 5,
            },
            tid: null,
            uid:'',
            total: 0,
            //绑定申请对话框
            rightdialogVisible:false,
            applyForm:{
                value:[]
            },
            options:[],
            //options的自定义规则
            myprop:{
                label:'groupName',
                value:'id'
            },
            //表单验证信息
            rules: {
                value:[
                    { required: true, message: '请选择上级单位', trigger: 'change' },
                ]
            }
        }
    },
    created(){
        this.uid=sessionStorage.getItem('uid'),
        this.getRoleofZuzhi()
        this.getUplist()
    },
    methods:{
        //获取绑定的上级
        async getUplist(){
            
        },
        //打开绑定历史
        openbindHistory(){
            this.getHistoryList()
            this.bindHistorydialogVisible=true
        },
        //获取绑定历史记录
        async getHistoryList(){
            const{data:res} = await this.$http.get('/authority/getBindApplyHistory',{
                params:{
                    pageNum:this.formInline.pageNum,
                    pageSize:this.formInline.pageSize,
                    uid:this.uid
                }
            })
            if(res!=null){
                this.total=res.data.total;
                this.bindHistoryList=res.data.list
            }
        },
        //获取当前组织角色与绑定的上级
        async getRoleofZuzhi(){
            const {data:res} = await this.$http.get('/authority/getOwnAuth',{
                params:{
                    uid:this.uid
                }
            })
            if(res!=null){
                if(this.bindUp.length==0){
                    if(res.data.fatherName!=null)
                        this.bindUp.push(res.data)
                }
                
                if(res.data.whetherSeeAttendance==0){
                    this.resultKaoq='关闭考勤结果'
                }else{
                    this.resultKaoq='开放考勤结果'
                }
                sessionStorage.setItem("groupId",res.data.adminGroupEntity.id)
                this.nowRight=res.data.adminGroupEntity.groupName+"管理员"
            }
        },
        //打开前往绑定对话框
        async openbind(){
            const { data: res } = await this.$http.get('/authority/getGroupList', {
                params: {
                    groupType:1,
                    groupId :1
                }
            })
            if(res!=null){
                this.options=res.data
            }
            for (let i = 0; i < this.options.length; i++) {
                if(!this.options[i].children) {
                    this.$set(this.options[i], 'children', []);
                }
                const { data: res } = await this.$http.get('/authority/getGroupList', {
                    params: {
                        groupType:2,
                        groupId :this.options[i].id
                    }
                })
                console.log("res",res)
                if(res.data!=null){
                    this.options[i].children = res.data;
                }else{
                    this.options.pop(i);
                }
            }
            this.gotobinddialogVisible=true
        },
        //关闭绑定上级对话框
        closegotobind(formName){
            this.applyForm.value=''
            this.gotobinddialogVisible=false
            this.$refs[formName].resetFields();
        },
        //绑定上级操作
        async gotobind(formName){
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    const { data: res } = await this.$http.post('/authority/subBindApply', qs.stringify({
                    groupId: this.applyForm.value[1],
                    uid: this.uid,
                    }))
                    console.log("绑定的groupid",this.applyForm.value)
                    if(res.code==200){
                        this.$message({
                        type: 'success',
                        message: '申请成功!'
                        });

                    }else{
                        this.$message({
                        type: 'info',
                        message: '申请失败!'
                        });
                        
                    }
                    this.applyForm.value=''
                    this.gotobinddialogVisible=false
                    this.$refs[formName].resetFields();
                }else{
                    return false
                }
            })
        },
        async openResult(data){
            const{data:res}=await this.$http.post('/authority/changeAttendanceStatus',qs.stringify({
                groupId :sessionStorage.getItem('groupId'),
                whetherSeeAttendance :1
            }))
            if(res.code==200){
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.getRoleofZuzhi()
            }
        },
        async closeResult(data){
            const{data:res}=await this.$http.post('/authority/changeAttendanceStatus',qs.stringify({
                groupId :sessionStorage.getItem('groupId'),
                whetherSeeAttendance :1
            }))
            if(res.code==200){
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.getRoleofZuzhi()
            }
        },
        // 实现分页
        // 更改了每页大小
        handleSizeChange(val) {
            this.formInline.pageNum = 1
            this.formInline.pageSize = val
            this.getHistoryList()
        },
        // 更改了第几页
        handleCurrentChange(val) {
            this.formInline.pageNum = val
            this.getHistoryList()
        },
        handleClick(){

        },
        handleClose(){

        },
        handleChange(){},
    }
}
</script>

<style scope>
    
</style>